<script setup lang="ts">
import { JumpPath, Tips } from "@/utils/index";
import { useTheme } from "@/composables/useTheme";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import { pcCurl, setShowSize, getPolicy, getPolicypcshow } from "@/api/pcApi";
import { setNotice } from "@/api/setting";
import saveUserInfoToLocation from "@/composables/saveUserInfoToLocation";
import Cache from "@/utils/cache";
import { USER_INFO } from "@/config/cache";
import hideWechatMenu from "@/composables/hideWechatMenu";
import { debounceImmediate } from "@/utils/validate";
onShow(() => {
  hideWechatMenu();
});
let userInfo = ref({});
onLoad(() => {
  if (Cache.get(USER_INFO)) {
    userInfo = JSON.parse(Cache.get(USER_INFO));
    let findIndex = radioList.value.findIndex(
      (item) => item.value == userInfo.pc_show_size
    );
    if (findIndex > -1) {
      current.value = findIndex;
    }
    notice_content.value = userInfo.notice_content; //公告回显
  }
  // getList();
  getUrlHandler();
});
let linkList = ref([]);
function getUrlHandler() {
  pcCurl().then((res) => {
    linkList.value = res.data.list;
  });
}
function setShowSizeHandler() {
  const params = {
    pc_show_size: radioList.value[current.value].value,
  };
  setShowSize(params).then((res) => {
    const data = res.data.business;
    saveUserInfoToLocation(data);
  });
}
onReady(() => {
  hidePageNavInWechatBrowser();
});
const { colorStyle } = useTheme();
let current = ref(0);
const radioList = ref([
  {
    name: "横屏显示",
    value: "1",
  },
  {
    name: "竖屏显示",
    value: "2",
  },
]);
function radioChange(evt: any) {
  if (radioList.value[current.value].value == evt.detail.value) return;
  for (let i = 0; i < radioList.value.length; i++) {
    if (radioList.value[i].value === evt.detail.value) {
      current.value = i;
      break;
    }
  }
  console.log(radioList.value[current.value].value, evt.detail.value);

  setShowSizeHandler();
  console.log(radioList.value[current.value]);
}
function copyUrlHandler(item) {
  if (item.curl) {
    uni.setClipboardData({
      data: item.curl,
      success: function () {
        uni.showToast({
          title: "复制成功",
          icon: "success",
          duration: 2000,
        });
      },
    });
  } else {
    imgUrl.value = item.images;
    // 自行搜索情况
    openPop.value = true;
  }
}

// 大屏显示产品start-------
let list = ref([]);
function getList() {
  getPolicy().then((res) => {
    let listData = res.data.list;
    listData.forEach((item) => {
      item.is_pc_show = !!item.is_pc_show;
    });
    list.value = listData;
    console.log(list.value);
  });
}

function switchChange(e) {
  const params = {
    id: list.value[e].id,
    is_pc_show: list.value[e].is_pc_show ? 1 : 0,
  };
  getPolicypcshow(params);
}
function submitHandler() {
  list.value.forEach((item) => {
    item.is_pc_show = item.is_pc_show ? 0 : 1;
  });

  console.log("确认点击", list.value);
}
// 大屏显示产品end-----------

// 公告设置start----------
let notice_content = ref("");
function setNoticeHandler() {
  let params = { notice_content: notice_content.value };
  setNotice(params).then((res) => {
    saveUserInfoToLocation(res.data.business);
  });
  console.log("确认点击");
}
watch(
  () => notice_content.value,
  (newValue, oldValue) => {
    setNoticeHandler();
  }
);
// 公告设置end----------

// 搜索弹窗start------
let imgUrl = ref("");
let openPop = ref(false);
function closeFollowCode() {
  openPop.value = false;
}
// 搜索弹窗end------
</script>
<template>
  <view class="wrap" :style="colorStyle">
    <view
      class="set_item mgt16 flex_sb"
      @click="JumpPath('/pages/basicSet/largeScreenSon/screenGoods')"
    >
      <text>设置显示产品</text>
      <text class="iconfont icon-xiangyou"></text>
    </view>
    <!-- <view class="wrap_item mgt20">
      <view class="title_box blod_class">大屏显示产品</view>
      <view class="data_item">
        <view class="info">
          <view
            class="switch_item flex_sb"
            v-for="(item, index) in list"
            :key="index"
          >
            <text>{{ item.title }}</text>
            <up-switch
              inactiveColor="rgb(178, 189, 194)"
              activeColor="var(--view-theme)"
              size="20"
              v-model="item.is_pc_show"
              @change="switchChange(index)"
            ></up-switch>
          </view>
        </view>
      </view>
    </view> -->
    <!-- <view class="wrap_item mgt20">
      <view class="title_box blod_class">公告设置</view>
      <view class="textarea_box">
        <textarea
          class="textarea_class"
          placeholder-class="placeholder_class"
          placeholder="请输入公告内容"
          v-model="notice_content"
        ></textarea>
      </view>
    </view> -->

    <view class="set_item mgt20 flex_sb">
      <text class="blod_class">显示尺寸</text>
      <radio-group @change="radioChange" class="radio_group flex_s">
        <label
          class="radio_item flex_s"
          v-for="(item, index) in radioList"
          :key="item.value"
        >
          <view>
            <radio
              color="var(--view-theme)"
              :value="item.value"
              :checked="index === current"
            />
          </view>
          <view>{{ item.name }}</view>
        </label>
      </radio-group>
    </view>
    <!-- <view class="set_item flex_sb">
      <text class="blod_class">大屏链接</text>
      <view class="right_info flex_s">
        <text class="url_class line1" v-if="pcUrl">{{ pcUrl }}</text>
        <text class="url_class line1" v-else>暂无链接</text>
        <text class="iconfont icon-fuzhi" @click="copyUrlHandler"></text>
      </view>
    </view> -->
    <view class="wrap_item mgt20">
      <view class="title_box blod_class">大屏链接</view>
      <view class="link_box">
        <view class="link_title"
          >您的企业id：<text class="num">{{ userInfo.id }}</text></view
        >
        <view class="link_list">
          <view
            class="link_item pad10"
            v-for="(item, index) in linkList"
            :key="index"
          >
            <view class="info_box flex_sbs">
              <view class="left_info">
                <view class="top_box">
                  <view class="tip_box">{{ item.title }}</view>
                  <view class="instruc_class">{{ item.instructions }}</view>
                </view>
                <view class="link_url flex_s" v-if="item.curl">{{
                  item.curl
                }}</view>
              </view>
              <view class="right_btn pad1020" @click="copyUrlHandler(item)">
                <text v-if="item.curl">复制</text>
                <text v-else>入口</text>
              </view>
            </view>
            <!-- <view class="line_class"></view> -->
          </view>
        </view>
      </view>
    </view>
    <!-- 引导搜索弹窗start------- -->
    <view class="followCode" v-if="openPop">
      <view class="pictrue">
        <view class="img_box">
          <image :src="imgUrl" mode="aspectFill" />
        </view>
        <view class="follow_btn" @click="closeFollowCode"> 我知道了 </view>
      </view>

      <view class="mask" @click="closeFollowCode"></view>
    </view>
    <!-- 引导搜索弹窗end------- -->
  </view>
</template>

<style scoped lang="scss">
.wrap {
  .mgt16 {
    margin-bottom: 16rpx;
  }
  .mgt2 {
    margin-bottom: 2rpx;
  }
  .wrap_item {
    .link_box {
      background: #fff;
      padding: 10rpx 40rpx 40rpx;
      .link_list {
        .link_item {
          border: 2rpx solid rgba(221, 203, 157, 1);
          border-radius: 10rpx;
          background: rgba(221, 203, 157, 0.06);
          margin-bottom: 30rpx;
          .line_class {
            width: 100%;
            height: 2rpx;
            border-radius: 10rpx;
            background: rgba(221, 203, 157, 1);
            margin: 20rpx 0;
          }
          .info_box {
            font-size: 28rpx;
            color: rgba(100, 79, 24, 1);
            .left_info {
              flex: 1;
              .link_url {
                white-space: nowrap;
              }
              .top_box {
                margin-bottom: 20rpx;
                .instruc_class {
                  padding-top: 10rpx;
                }
                .tip_box {
                  float: left;
                  flex-shrink: 0;
                  margin-right: 10rpx;
                  color: #fff;
                  padding: 5rpx 10rpx;
                  border-radius: 10rpx;
                  background: rgba(221, 203, 157, 1);
                }
              }
            }
            .right_btn {
              flex-shrink: 0;
              border-radius: 99rpx;
              color: #fff;
              background: #ffac41;
            }
          }
        }
      }
      .link_title {
        font-weight: bold;
        line-height: 70rpx;
        .num {
          color: #d43030;
        }
      }
    }
    .title_box {
      padding-left: 40rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
    }
    .textarea_box {
      height: 200rpx;
      overflow: hidden;
      background: #fff;
      padding: 10rpx 40rpx 0;
      textarea {
        font-size: 30rpx;
      }
      .textarea_class {
        height: 200rpx;
        width: 100%;
      }
      .placeholder_class {
        color: #ccc;
      }
    }
    .data_item {
      width: 100%;
      background: #fff;
      padding: 0 40rpx;
      .switch_item {
        font-size: 30rpx;
        padding: 20rpx 0;
      }
    }
  }
  .set_item {
    background: #fff;
    padding: 40rpx;
    color: rgba(39, 38, 54, 1);
    font-size: 30rpx;

    .right_info {
      .url_class {
        text-align: right;
        width: 410rpx;
        flex-grow: 1;
      }
    }
    .radio_group {
      .radio_item {
        margin-left: 20rpx;
      }
    }
    .iconfont {
      margin-left: 10rpx;
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
.followCode {
  .mask {
    z-index: 10000;
  }

  .pictrue {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 620rpx;
    // height: 720rpx;
    padding: 0 0 80rpx;
    border-radius: 12px;
    left: 50%;
    top: 50%;
    margin-left: -310rpx;
    margin-top: -450rpx;
    // background: #fff;
    position: fixed;
    z-index: 10001;
    background-size: cover;
    background-repeat: no-repeat;
    .follow_btn {
      position: absolute;
      padding: 20rpx 50rpx;
      transform: translateX(-50%);
      left: 50%;
      bottom: -60rpx;
      border-radius: 20rpx;
      box-shadow: 0px 4rpx 20rpx 0px rgba(221, 203, 157, 0.4);
      background: var(--view-theme);
      font-weight: bold;
    }
    .img_box {
      // margin-top: 88rpx;
      width: 620rpx;
      height: 715rpx;
      border-radius: 20rpx;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
